/**
 * Created by seeker910 on 2017/8/23.
 * 
 * 下拉框 checkbox 多选
 */
Rsd.define('Rsd.form.MulitiSelect', {
    extend: 'Rsd.form.Input',
    xtype:'mulitiselect',
    cls:'x-control-mulitiselect',
    textMember:'text',
    valueMember:'value',
    readonly:true,
    listeners:{
        'blur':{
            element:'ctrl',
            fn:function (sender,evt) {
                var me = this; 
                var _box = this.dropdownBox; 
                 //blur 事件在 click事件先发生，所以延时处理关闭
                setTimeout(function(){
                    //console.log(_box.cancelClose);
                    //关闭被阻止 
                    if(!_box.cancelClose)
                    {
                        me.closeDropdownBox(); 
                    }
                    _box.cancelClose = false;
                   
                },500); 

                return true;
            }
        },
        /*
        'click':{
            element:'ctrl',
            fn:function (sender,event) {
                var me = this;
                var _style = {};
                var _left = ((me.label.width ? me.label.width : me.label.element.clientWidth) + 10);
                _style.marginLeft =  _left + 'px';
                _style.marginTop = (me.height - parseInt(me.dom.style.marginBottom)) + 'px';
                _style.tabIndex = me.tabIndex; 
                _style.width = (me.width - _left - parseInt(me.dom.style.marginLeft)  - parseInt(me.dom.style.marginRight)) + 'px'; 
                //me.showDropdownBox(null,_style);
                event.isCancel = true;
                return false;
            }
        },
        */
        'focus':{
            element:'ctrl',
            fn:function (sender,evt) {
                var me = this;
                var _style = {};
                var _left = ((me.label.width ? me.label.width : me.label.element.clientWidth) + 10);
                _style.marginLeft =  _left + 'px';
                _style.marginTop = (me.height - parseInt(me.dom.style.marginBottom)) + 'px';  
                _style.tabIndex = me.tabIndex;
                _style.width = (me.width - _left -parseInt(me.dom.style.marginLeft) - parseInt(me.dom.style.marginRight)) + 'px'; 
                me.showDropdownBox(null,_style);
                return false;
            }
        },
        'keyup':{
            element:'ctrl',
            fn:function (sender,evt) {
                var me = this;

                if (evt.code == 'Enter')
                {
                    me.closeDropdownBox();
                }
                if (evt.code == 'Escape')
                {
                    me.closeDropdownBox();
                }
                if (evt.code == 'ArrowUp')
                {

                }
                if (evt.code == 'ArrowDown')
                {

                }

            }
        }
    },
    /**
     * 
     * 
     */
    onchange:'',
    /**
    数据源
    */
    dataSource:null,
    /**
     * */
    constructor: function MulitiSelect (config) {
        this.apply(config||{});
    },
    /**
    *
    * */
    onAfterInit:function onAfterInit() {

        var me = this;

        this.callParent();
        this.ctrl.element.setAttribute('readonly',true);
        //初始化
        this.initDropdownBox(
            {
                minWidth:'100px',
                minHeight:'50px',
                maxHeight:'300px',
                overflowY:'auto'
            },'x-box','');

        setTimeout(function () {
            me.loadData(me.dataSource);
        },10);

    },

    /**  
     *可通过 重写该方法，定制多选框
     *
     * */
    loadData:function loadData(data) {

        var me = this;
        me.dataSource = data ||[];
        var list = me.dataSource;
        Rsd.empty(me.dropdownBox);
        me.___is_loaded = false;
        for (var i in list) {
            var li = document.createElement('li');
            li.style.lineHeight = '25px';

            li.tag = list[i];
            li.id = list[i][me.valueMember];

            li.onclick = function (evt) {

                this.childNodes[0].checked = !this.childNodes[0].checked ;
                this.tag['IsChecked'] = this.childNodes[0].checked;

                me.ctrl.element.value = me.getText();
                //调用onchange 事件，现实对 onchange的支持

                //根据事件注册规则，返回flase 不移除注册方法
                return false;

            }
            var chk = document.createElement('input');
            chk.type = 'checkbox';
            chk.style.pointerEvents = 'none';
            li.appendChild(chk);

            li.appendChild(document.createTextNode(list[i][me.textMember]));
           
            me.dropdownBox.appendChild(li);
        }
        me.___is_loaded = true; 
        //console.log('loadData',me.__value);
        this.setValue(me.__value);
    },

    /**
     * 
     * */
    getValue:function getValue() {
 
        var _temp = [];
        var list = Rsd.select(this.dropdownBox,'li');
        for(var i in list)
        {
            if(list[i].tag && list[i].tag['IsChecked'])
            {
                _temp.push(list[i].tag[this.valueMember]);
            }
        }

        this.__value = _temp;
        //console.log(_temp);
        return this.__value ;
    },

    /**
     * 
     * */
    getText:function getText() {
    
        var _temp = [];
        var list = Rsd.select(this.dropdownBox,'li');
        for(var i in list)
        {
            if(list[i].tag && list[i].tag['IsChecked'])
            {
                _temp.push(list[i].tag[this.textMember]);
            }
        }
       
        return _temp.join(',');
    },
    /**
     * 参数 value 格式：逗号分隔在字符串 或 item 的 value值数据组
     * */
    setValue:function setValue(value) {
 
        var _value = value || null;
     
        if(Rsd.isString(_value)) { 
           _value = _value.split(','); 
        }
        if( this.___is_loaded !== true)
        {
            this.__value = _value; 
             
            return;
        }
        //console.log('setValue ',_value);
        if(Rsd.isArray(_value))
        {
            //设置li 被选中
            var list = Rsd.select(this.dropdownBox,'li'); 
            
             for(var i in list)
             { 
                if(_value.indexOf(list[i].id)<0)
                {
                    list[i].childNodes[0].checked = false;
                    list[i].tag["IsChecked"] = false;
                }
                else
                {
                    list[i].childNodes[0].checked = true;
                    list[i].tag["IsChecked"] = true;
                    
                }
                 
             }
        }
        this.ctrl.element.value = this.getText();
        this.__value = _value;
    },
    /**
     *
     * */
    makeControl:function makeControl(config,row) {
        //debugger;
        
        var _row =row||{};
        var _config = config ||{};
        var _editable = _config.editable;
        var _value = _row[_config.dataIndex || _config.dataindex || _config.name];

        var _valueMember = _config.valueMember || 'value';
        var _textMember = _config.textMember || 'text';
        var _colorMember = _config.colorMember || 'color';
 
        var _ctrl = null;
        var list = config.dataSource;
        var _ctrl = null;

        _ctrl = document.createElement('ul');
        _ctrl.setAttribute("value", _value);
        _ctrl.style.listStyleType = "none";
        _ctrl.style.position = 'relative';
        _ctrl.style.width = '100%';
        _ctrl.style.height = '100%';
        for (var i in list) {

            var item = list[i];
            if (item.value == 0) {
                continue;
            }
            var _checked = _value.indexOf(item[_valueMember])>=0;
            if(_config.showAll !==true && _checked===false)
                {
                    continue;
                }
            var li = document.createElement('li');
            li.style.lineHeight = '25px';
            if(_config.nobr===true)
            {
                //
            }
            else
            {
                li.style.float = 'left';
                li.style.display = 'block';
            }
            
            li.tag = item;
            li.id = item[_valueMember];
            var chk = document.createElement('input');
            chk.type = 'checkbox';
            chk.checked = _checked; 
            chk.style.pointerEvents = 'none';
            if (_editable) {
             
                chk.onclick = function () {
                    //show config.selector 
                    alert("Error:MulitiSelect列表编辑模式未实现");
                };
            } 
            li.appendChild(chk);
            li.appendChild(document.createTextNode(item[_textMember]));
           
            _ctrl.appendChild(li);

        } 
        return [_ctrl];
    }
    
},function (type) {
     
});